<template>
	<view class="main">
		<view class="waiabout" v-if="RechargeRecord.length > 0">
			<view class="about" v-for="(v,k) in RechargeRecord" :key="k">
				<view class="date">
					{{v.date}}
				</view>
				<view class="box" v-for="(v,k) in v.data" :key="k">
					<view class="left">
						<view class="title">
							{{v.recharge_type_desc}}
						</view>
						<view class="time">
							{{v.create_time}}
						</view>
					</view>
					<view class="right">
						-{{v.money}}元
					</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-if="s">
			<view class="kong" v-if="RechargeRecord.length == 0">
				<image src="@/static/nodata.svg" mode=""></image>
				<view class="nowenzi">
					这里暂时还是空空如也呢
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserBillingList
	} from "@/request/api.js"
	export default {
		data() {
			return {
				RechargeRecord: [],
				page: 1,
				page_size: 10,
				totalPage: '',
				s: false,
			};
		},
		async created() {
			let res = await getUserBillingList(
			{
				page:this.page,
				page_size:this.page_size
			})
			this.totalPage = res.data.page_info.total
			let {
				data
			} = res.data
			this.RechargeRecord = data
			this.s = true
		},
		methods: {
			async moreRechargeRecordList() {
				let newtotalPage = Math.ceil(this.totalPage / this.page_size)
				this.page++
				if (this.page > newtotalPage) return
				let res = await Users.RechargeRecord(this.page)
				let pageList = res.data.data
				this.RechargeRecord = this.RechargeRecord.concat(pageList)
			}
		},
		// 滑倒底部加载更多
		async onReachBottom() {
			this.moreRechargeRecordList()
		},
	}
</script>

<style lang="less" scoped>
	@import url("./RechargeRecord.less");
</style>